<template>
  <div class="restaurant-list px-4 pb-10 mx-auto max-w-6xl"> <!-- 调整容器宽度 -->
    <!-- 单个商家卡片 -->
    <div
        v-for="restaurant in restaurants"
        :key="restaurant.id"
        class="restaurant-card bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow cursor-pointer mb-8"
        @click="goToRestaurantDetail(restaurant.id)"
    >
      <!-- 上方：商家信息区域 -->
      <div class="p-5 border-b border-gray-100">
        <div class="flex items-start">
          <!-- 商家图片 -->
          <div class="w-36 h-36 mr-4 flex-shrink-0 overflow-hidden rounded-lg">
            <img
                :src="restaurant.image"
                class="w-full h-full object-cover"
                :alt="restaurant.name"
            />
          </div>

          <!-- 商家文字信息 -->
          <div class="flex-1 pt-2">
            <h3 class="text-xl font-bold">{{ restaurant.name }}</h3>
            <div class="flex flex-wrap items-center text-base text-gray-500 mt-2">
              <span class="text-yellow-500">★ {{ restaurant.rating }}</span>
              <span class="mx-2">|</span>
              <span>月售 {{ restaurant.sales }}</span>
              <span class="mx-2">|</span>
              <span>人均 ¥{{ restaurant.avgPrice }}</span>
            </div>
            <div class="text-base text-orange-500 mt-3">
              {{ restaurant.deliveryType }}
            </div>
          </div>
        </div>
      </div>

      <!-- 下方：菜品信息区域 -->
      <div class="p-5">
        <h4 class="text-lg font-medium text-gray-500 mb-4">推荐菜品</h4>
        <div class="flex justify-between px-2">
          <div
              v-for="(dish, idx) in restaurant.dishes.slice(0,3)"
              :key="idx"
              class="text-center flex-1 mx-2"
          >
            <!-- 菜品图片 -->
            <div class="w-40 h-40 overflow-hidden rounded-lg mb-3 mx-auto">
              <img
                  :src="dish.image"
                  class="w-full h-full object-cover"
                  :alt="dish.name"
              />
            </div>
            <p class="text-sm text-gray-700 line-clamp-1">{{ dish.name }}</p>
            <p class="text-sm text-orange-500 font-bold mt-1">¥{{ dish.price }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

const goToRestaurantDetail = (restaurantId) => {
  router.push({
    name: 'restaurantDetail',
    params: { id: restaurantId }
  })
}

defineProps({
  restaurants: {
    type: Array,
    default: () => []
  }
})
</script>

<style>
/* 可选：自定义滚动条样式 */
::-webkit-scrollbar {
  height: 4px;
}
::-webkit-scrollbar-thumb {
  background: #e0e0e0;
  border-radius: 2px;
}
</style>